<template>
  <div  id="test_title" class="screen-container" ref="my_container">
    <header class="screen-header">
      <span id="yuqing_title" class="title">
        <strong>
<!--          新疆舆情实时监控系统-->
        </strong>
      </span>
      <div class="title-right">
<!--        <span id="test_time" class="datetime">2049-01-01 00:00:00</span>-->
      </div>
    </header>
    <div class="screen-body">
      <section id="province" class="screen-first">
        <strong>
          七日热点舆情
        </strong>
      </section>
      <section class="screen-seconds">

        <div class="mytable">
          <table>
            <tr>
              <th width="5%">序号</th>
              <th width="60%">标题</th>
              <th width="8%">舆情属性</th>
              <th width="8%">来源</th>
              <th width="8%">时间</th>
            </tr>
            <tr v-for="(item,index) in table_data">
              <td style="text-align: center">{{ index+1 }}</td>
              <td>{{ item.title.substring(0,90) }}...</td>
              <td style="text-align: center">{{ item.emotion }}</td>
              <td style="text-align: center">{{ item.author }}</td>
              <td style="text-align: center">{{ item.publish_time.substring(5,16) }}</td>
            </tr>
          </table>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
name: "seven_hot_yuqing_detail",
  data() {
    return {
      table_data: [],
      // echarts_data: [],
      font_size_test: 1
    }
  },mounted() {
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  methods: {
    async getData() {

      /*this.$http.get('/index').then(res=>{
        console.log(res)
      })
        .catch(err=>{
          console.log(err)
        })*/

      /*var arr = ['2','3','',null,undefined,'7',' ','9'];
      var r = arr.filter(function (s) {
        return s && s.trim(); // 注：IE9(不包含IE9)以下的版本没有trim()方法
      });*/

      const {data: ret} = await this.$http.get('/index')
      this.table_data = ret.data.day7shotArticle
      console.log(this.table_data)

      // 去除数组中的空指针
      this.table_data = this.table_data.filter(i => i);

      // 规范化数据
      this.table_data = this.table_data.filter(i => {
        if(i.emotion=="NEG"){
          i.emotion="消极"
        }
        if(i.emotion=="NEU"){
          i.emotion="中性"
        }
        if(i.emotion=="POS"){
          i.emotion="积极"
        }
        return i
      })
      // console.log(this.table_data)

      this.chartInstance = this.$echarts.init(this.$refs.mychart1)

    },
    screenAdapter() {
      console.log("screenAdapter")
      this.font_size_test = this.$refs.my_container.offsetWidth / 200 * 2.2
      console.log(this.font_size_test)
      document.getElementById("test_title").style.fontSize = this.font_size_test + "px"
      document.getElementById("yuqing_title").style.fontSize = this.font_size_test * 1.4 + "px"
      document.getElementById("province").style.fontSize = this.font_size_test * 1.2 + "px"
    }
  },



}
</script>

<style lang="less" scoped>


.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}

th,td {
  padding: 1% 0;
  border: 1px solid #f6edd1;
}

.screen-header {
  width: 100%;
  height: 6%;
  //font-size: 20px;
  background-color: #161522;
  position: relative;
  color: #fff;

  > div {
    img {
      width: 100%;
    }
  }

  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }

  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }

  .datetime {
    //font-size: 15px;
    margin-left: 10px;
  }

  .logo {
    //position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-40%);

    img {
      height: 80%;
      width: 10%;
    }
  }
}

.screen-body {
  width: 100%;
  height: 100%;
  //display: flex;
  //flex-direction: column;
  //flex-wrap: wrap;
  margin-top: 10px;

  .screen-first {
    width: 100%;
    height: 6%;
    //font-size: 25px;
    padding-left: 1%;
    padding-top: 1%;
    background: #0C1E37;
  }

  .screen-seconds {
    margin-top: 1%;
    width: 100%;
    height: 92%;
    //font-size: 25px;
    display: flex;

    .mychart-container {
      width: 47%;
      height: 80%;
      background: #0C1E37;
    }

    .mytable {
      padding-left: 10%;
      padding-right: 10%;
      width: 100%;
      height: 80%;
      //margin-left: 1%;
      background: #0C1E37;
    }
  }
}

.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}

* {
  //border: 1px solid red;
}
</style>
